<template>
  <div class="container">
    <nav v-if="categories.length > 0" class="nav">
      <div class="sort">
        <ul class="sort-ul" ref="sort">
          <li
            v-for="(t, i) in categories[0].catArray"
            :key="i"
            :class="i == 0 ? 'current' : ''"
            @click="changeSort(i)"
          >
            {{ t.name }}
          </li>
        </ul>
        <div class="select" @click="isShow">筛选</div>
      </div>
      <div class="sort-content" v-if="hidden">
        <ul class="pay">
          <li
            v-for="(t, i) in categories[1].catArray"
            :key="i"
            :class="params.pay == i ? 'current' : ''"
            @click="changePay(i)"
          >
            {{ t.name }}
          </li>
        </ul>
        <div>
          <ul class="bookstatus">
            <li
              v-for="(t, i) in categories[2].catArray"
              :key="i"
              :class="params.bookStatus == i ? 'current' : ''"
              @click="changeStatus(i)"
            >
              {{ t.name }}
            </li>
          </ul>
          <ul class="wordcount" v-if="categories[3]">
            <li
              v-for="(t, i) in categories[3].catArray"
              :key="i"
              :class="params.wordCount == i ? 'current' : ''"
              @click="changeCount(i)"
            >
              {{ t.name }}
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- <Loading v-show="isLoading" /> -->
    <div>
      <van-empty
        image="search"
        description="没有找到想看的内容哦~"
        v-if="isEmpty"
      />
      <van-list
        v-else
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="我是有底线的~~"
        @load="onLoad"
      >
        <ul class="list">
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="gotoDetail(item.id)"
          >
            <div class="img">
              <img v-lazy="item.cover" alt="" />
              <!-- <div class="play" v-if="isAudio">
              <van-icon name="play-circle" size="20" color="#fff" />
            </div> -->
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}</div>
          </li>
        </ul>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getResultData } from "@/request/api";
export default {
  props: {
    categories: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      hidden: false,
      list: [],
      cateId: 8,
      params: {
        sort: 1,
        pay: 0,
        bookStatus: 0,
        wordCount: 0,
        page: 1,
      },
      loading: false,
      finished: false,
      error: false,
      isEmpty: false,
    };
  },
  methods: {
    isShow() {
      this.hidden = !this.hidden;
    },
    //前往详情页
    gotoDetail(id) {
      this.$router.push("/detail?sourceUuid=" + id);
    },
    //滚动事件
    onLoad() {
      this.params.page++;
      this.getData();
    },
    getData(cateId) {
      if (cateId) {
        this.cateId = cateId;
        this.list = [];
      }
      this.loading = true;
      getResultData(
        `/source/v2/searchBook.json?catId=${this.cateId}
            &wordCount=${this.params.wordCount}
            &pay=${this.params.pay}
            &bookStatus=${this.params.bookStatus}
            &sort=${this.params.sort}
            &page=${this.params.page}`
      ).then((res) => {
        if (res.resCode == 0) {
          if (res.list == undefined || res.list < 24) {
            this.finished = true;
            this.isEmpty = true;
            this.loading = false;
            return;
          }

          this.isEmpty = false;
          this.list = [...this.list, ...res.list];
          this.loading = false;
        }
      });
    },
    //排序选择
    changeSort(i) {
      this.params.sort = i == 1 ? 3 : 1;
      this.getData(i);
      [...this.$refs["sort"].children].forEach((item) => {
        item.className = "";
      });
      this.$refs["sort"].children[i].className = "current";
    },
    //付费选择
    changePay(i) {
      this.params.pay = i;
      this.getData(i);
    },
    //书本状态选择
    changeStatus(i) {
      this.params.bookStatus = i;

      this.getData(i);
    },
    //字数选择
    changeCount(i) {
      this.params.wordCount = i;
      this.getData(i);
    },
  },

  created() {
    this.loading = true;
  },
};
</script>

<style lang="scss" scoped>
ul {
  width: 100%;
  display: flex;
  font-size: 16px;
}
.hidden {
  display: none;
}
.nav {
  position: sticky;
  top: 97px;
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 14px;

  li {
    padding-right: 6px;
    &:nth-child(2) {
      padding: 0 6px;
      border-left: 1px solid #666;
    }
  }
  .current {
    color: #e64d2e;
  }
  .select {
    width: 90px;
    font-size: 16px;
    padding: 5px 8px;
    cursor: pointer;
    border: 1px solid #666;
    box-sizing: border-box;
    border-radius: 15px;
  }
}
.sort-content {
  margin: 10px 14px;
  transition: display 1s linear;
  ul {
    align-items: center;
    padding-right: 10px;
    li {
      padding-right: 0 10px;
    }
  }
  .pay,
  .bookstatus,
  .wordcount {
    flex-wrap: wrap;
    align-content: flex-start;
    li {
      color: #666;
      margin-bottom: 10px;
      cursor: pointer;
      &:nth-child(1) {
        padding-right: 5px;
      }
      &:nth-child(n + 2) {
        padding: 0 5px;
      }
      &:last-child {
        padding-left: 0;
      }
    }
    li.current {
      color: #e64d2e;
    }
  }
}
.list {
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;
  li {
    width: 30%;
    text-align: left;
    margin-bottom: 14px;
    .img {
      width: 100%;
      height: 140px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .author {
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px;
    }
    .author,
    .title {
      font-size: 12px;
      line-height: 1.3;
    }
  }
}
</style>
